<template>
  <div class="report-wrapper user-conversion">
    <div class="main-hd">
      <h2>渠道画像</h2>
    </div>
    <div class="main-bd">
      <div class="content-wrap">
        <div class="search-con">
          <DatePicker
            type="daterange"
            v-model="selectDate"
            format="yyyy-MM-dd"
            placeholder="请选择日期"
            style="width: 200px;"
            @on-change="handleDatePicker"
          ></DatePicker>
          <Select class="search-col" placeholder="请选择渠道" v-model="platformId" filterable>
            <Option
              v-for="(item, index) in channelList"
              :value="item.id"
              :key="index"
            >{{ item.platformName }}</Option>
          </Select>
          <Button @click="handleReset" style="margin-left: 12px;">重置</Button>
        </div>
        <div class="table-con">
          <h3 class="table-title">渠道数据汇总</h3>
          <Table border :columns="utColumns" :data="utList" :loading="utLoading" @on-sort-change="handleSortChange1"></Table>
          <div class="expand-more" @click="handleExpand1" v-if="!utLoading && platformId == -1">
            <Icon type="ios-arrow-down" v-show="!expand1" />
            <Icon type="ios-arrow-up" v-show="expand1" />
            <span>{{ expand1 ? '收起' : '展开' }}</span>
          </div>
        </div>

        <div class="table-con">
          <h3 class="table-title">渠道平均值</h3>
          <Table border :columns="usColumns" :data="usList" :loading="usLoading" @on-sort-change="handleSortChange2"></Table>
          <div class="expand-more" @click="handleExpand2" v-if="!usLoading && platformId == -1">
            <Icon type="ios-arrow-down" v-show="!expand2" />
            <Icon type="ios-arrow-up" v-show="expand2" />
            <span>{{ expand2 ? '收起' : '展开' }}</span>
          </div>
        </div>

        <div class="table-con">
          <h3 class="table-title">渠道每日详情</h3>
          <Table border :columns="udColumns" :data="udList" :loading="udLoading"></Table>
          <Page
            :total="total"
            :current.sync="page"
            :page-size-opts="[10, 20, 40, 80, 100]"
            show-total
            show-elevator
            show-sizer
            @on-change="handleCurrentChange"
            @on-page-size-change="handleSizeChange"
          ></Page>
        </div>
      </div>
    </div>
  </div>  
</template>

<script>
  import mixin from './mixin';
  import qs from 'qs';

  export default {
    name: 'channelPortrait',
    mixins: [ mixin ],
    data () {
      return {
        expand1: false,
        expand2: false,
        sort: false,
        platformId: -1,
        selectDate: [],
        beginDate: '',
        endDate: '',
        channelList: [], // platform list
        utTotal: [],
        utSubList: [],
        usTotal: [],
        usSubList: [],
        utList: [], // user transfer list
        udList: [], // user detail list
        usList: [], // user transfer list
        utColumns: [
          { title: '渠道', key: 'platformName' },
          { title: '注册', key: 'registerCnt', sortable: 'true' },
          { title: '运营商', key: 'carrierCnt', sortable: 'true' },
          { title: '腾讯', key: 'tencentCnt', sortable: 'true' },
          { title: '冰鉴', key: 'iceCnt', sortable: 'true' },
          { 
            title: '贷后邦',
            key: 'dhbCnt',
            sortable: 'true',
            // render: (h, params) => {
            //   let rate = this.numberFormatter(params.row.registerApplyRate);
            //   return h('span', rate)
            // }
          },
          { 
            title: '白骑士',
            key: 'bqsCnt',
            sortable: 'true'
          },
          { 
            title: '新颜',
            key: 'xinyanCnt',
            sortable: 'true'
          },
          {
            title: '通过',
            key: 'passCnt',
            sortable: 'true'
          },
          {
            title: '通过率',
            key: 'passRate',
            sortable: 'true',
            render: (h, params) => {
              let rate = this.numberFormatter(params.row.passRate);
              return h('span', rate)
            }
          }
        ],
        usColumns: [
          { title: '渠道', key: 'platformName' },
          { title: 'p值', key: 'pval', sortable: 'true' },
          { title: '腾讯分', key: 'tencentRiskScore', sortable: 'true' },
          { title: '冰鉴分', key: 'zmScore', sortable: 'true' },
          { title: 'XY-行为分', key: 'xinyan_loans_score', sortable: 'true',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'XY-行为分 '),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '新颜-贷款行为分'
                      }
                  })
                  
              ]);
            }
          },
          { 
            title: 'XY-场景分',
            key: 'xinyan_xy_100001',
            sortable: 'true',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'XY-场景分'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '新颜-小额网贷场景行为分'
                      }
                  })
                  
              ]);
            }
          },
          { 
            title: 'DHB-Loans',
            key: 'dhbPaydayLoanCnt',
            sortable: 'true',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'DHB-Loans'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '贷后邦-小额快速贷出现次数'
                      }
                  })
                  
              ]);
            }
          },
          { 
            title: 'BQS-M1',
            key: 'bqsMultiLoanIcnMonthCnt',
            sortable: 'true',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'BQS-M1'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '白骑士-身份证号一个月内调用多头次数'
                      }
                  })
                  
              ]);
            }
          },
          {
            title: 'BQS-M3',
            key: 'bqsMultiLoanIcn3MonthCnt',
            sortable: 'true',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'BQS-M3'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '白骑士-身份证号三个月内调用多头次数'
                      }
                  })
                  
              ]);
            }
          },
          {
            title: 'XY-Loans',
            key: 'xinyan_query_cash_count',
            sortable: 'true',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'XY-Loans'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '新颜-查询网络贷款类机构数'
                      }
                  })
                  
              ]);
            }
          },
          {
            title: 'XY-M1总',
            key: 'xinyan_xy_100004',
            sortable: 'true',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'XY-M1总'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '新颜-近1个月总查询笔数'
                      }
                  })
                  
              ]);
            }
          },
          {
            title: 'XY-M1多头',
            key: 'xinyan_xy_100016',
            sortable: 'true',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'XY-M1多头'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '新颜-近1个月查询多头'
                      }
                  })
                  
              ]);
            }
          }
        ],
        utLoading: true,
        usLoading: true,
        udLoading: true,
        udColumns: [
          { title: '日期', key: 'date' },
          { title: 'p值', key: 'pval' },
          { title: '腾讯分', key: 'tencentRiskScore' },
          { title: '冰鉴分', key: 'zmScore' },
          { title: 'XY-行为分', key: 'xinyan_loans_score',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'XY-行为分 '),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '新颜-贷款行为分'
                      }
                  })
                  
              ]);
            }
          },
          { 
            title: 'XY-场景分',
            key: 'xinyan_xy_100001',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'XY-场景分'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '新颜-小额网贷场景行为分'
                      }
                  })
                  
              ]);
            }
          },
          { 
            title: 'DHB-Loans',
            key: 'dhbPaydayLoanCnt',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'DHB-Loans'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '贷后邦-小额快速贷出现次数'
                      }
                  })
                  
              ]);
            }
          },
          { 
            title: 'BQS-M1',
            key: 'bqsMultiLoanIcnMonthCnt',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'BQS-M1'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '白骑士-身份证号一个月内调用多头次数'
                      }
                  })
                  
              ]);
            }
          },
          {
            title: 'BQS-M3',
            key: 'bqsMultiLoanIcn3MonthCnt',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'BQS-M3'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '白骑士-身份证号三个月内调用多头次数'
                      }
                  })
                  
              ]);
            }
          },
          {
            title: 'XY-Loans',
            key: 'xinyan_query_cash_count',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'XY-Loans'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '新颜-查询网络贷款类机构数'
                      }
                  })
                  
              ]);
            }
          },
          {
            title: 'XY-M1总',
            key: 'xinyan_xy_100004',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'XY-M1总'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '新颜-近1个月总查询笔数'
                      }
                  })
                  
              ]);
            }
          },
          {
            title: 'XY-M1多头',
            key: 'xinyan_xy_100016',
            renderHeader: (h,params) => {
              return h('span', [
                  h('strong', 'XY-M1多头'),
                  h('Icon', {
                      props: {
                        type: 'ios-help-circle-outline'
                      },
                      style: {
                        'font-size': '14px',
                        'vertical-align': 'text-bottom',
                        'font-weight': 'bold',
                        'color': '#2c8cf0'
                      },
                      domProps: {
                        title: '新颜-近1个月查询多头'
                      }
                  })
                  
              ]);
            }
          }
        ],
        pageSize: 10,
        page: 1,
        total: 0
      }
    },
    created () {
      this.getPlatformList();
      this.getUserTransferList1();
      this.getUserTransferList2();
      this.getUserTransferDetail();
    },
    watch: {
      platformId (newVal, oldVal) {
        if (newVal == -1) {
          this.expand1 = false;
          this.expand2 = false;
        }
        this.handleFilter();
      }
    },
    methods: {
      // 获取渠道
      getPlatformList () {
        this.$http.post('/helsinki/admin/daoliu/getAllPlatforms')
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.channelList = data.list;
          }
        }, error => {
          console.log(error);
        })
      },
      // 获取用户情况汇总
      getUserTransferList1 () {
        this.$http.post('/helsinki/admin/risk/platform-portrait/counts', {
          platformId: this.platformId,
          beginDate: this.beginDate,
          endDate: this.endDate
        }).then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            let total = data.total
            this.utTotal = [total];
            this.utSubList = data.list;
            this.utList = this.platformId == -1 ? this.utTotal : this.utSubList;
          }
          this.utLoading = false;
        }, error => {
          console.log(error);
        });
      },
      // 获取用户情况汇总
      getUserTransferList2 () {
        this.$http.post('/helsinki/admin/risk/platform-portrait/scores', {
          platformId: this.platformId,
          beginDate: this.beginDate,
          endDate: this.endDate
        }).then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            let total = data.total
            this.usTotal = [total];
            this.usSubList = data.list;
            this.usList = this.platformId == -1 ? this.usTotal : this.usSubList;
          }
          this.usLoading = false;
        }, error => {
          console.log(error);
        });
      },
      // 获取用户详情
      getUserTransferDetail () {
        this.$http.post('/helsinki/admin/risk/platform-portrait/scores', {
          type: 1,
          platformId: this.platformId,
          beginDate: this.beginDate,
          endDate: this.endDate,
          page: this.page,
          pageSize: this.pageSize
        }).then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.udList = data.list;
            this.total = data.totalSize;
          } else {
            this.udList = [];
            this.total = 0;
          }
          this.udLoading = false;
        }, error => {
          console.log(error);
        })
      },
      handleSortChange1 (params) {
        if (this.platformId === -1) {
          if (this.expand1) return;
          this.expand1 = true;
          this.utList = this.expand1 ? this.utList.concat(this.utSubList) : this.utTotal;
        }
      },
      handleSortChange2 (params) {
        if (this.platformId === -1) {
          if (this.expand2) return;
          this.expand2 = true;
          this.usList = this.expand2 ? this.usList.concat(this.usSubList) : this.usTotal;
        }
      },
      handleDatePicker (val) {
        if (this.platformId == -1) { this.expand1 = false;this.expand2 = false };
        if (Array.isArray(val)) {
          this.beginDate = val[0];
          this.endDate = val[1];
          this.selectDate = val;
        } else {
          this.beginDate = '';
          this.endDate = '';
          this.selectDate = [];
        }
        this.handleFilter();
      },
      handleFilter () {
        this.utLoading = true;
        this.udLoading = true;
        this.usLoading = true;
        this.page = 1;
        this.getUserTransferList1();
        this.getUserTransferList2();
        this.getUserTransferDetail();
      },
      // 展开/收起
      handleExpand1 () {
        this.expand1 = !this.expand1;
        this.utList = this.expand1 ? this.utList.concat(this.utSubList) : this.utTotal;
      },
      handleExpand2 () {
        this.expand2 = !this.expand2;
        this.usList = this.expand2 ? this.usList.concat(this.usSubList) : this.usTotal;
      },
      // 页码改变的回调，返回改变后的页码
      handleCurrentChange (val) {
        this.udLoading = true;
        this.page = val;
        this.getUserTransferDetail();
      },
      // 切换每页条数时的回调，返回切换后的每页条数
      handleSizeChange (val) {
        this.udLoading = true;
        this.pageSize = val;
        this.getUserTransferDetail();
      },
      // 导出用户数据汇总Excel
      exportData (type) {
        let params = qs.stringify({
          platformId: this.platformId,
          beginDate: this.beginDate,
          endDate: this.endDate,
          methods: ['getUserTransferList', 'getUserTransferDetail'],
          includeFields: [
            this.filterArray(this.utColumns),
            this.filterArray(this.udColumns)
          ]
        });
        location.href = `/helsinki/admin/report/export-excel?${params}`;
      },
      handleReset () {
        this.selectDate = [];
        this.beginDate = '';
        this.endDate = '';
        this.platformId = -1;
        this.expand = false;
        this.handleFilter();
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "./styles/common.scss";
</style>
